﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Wijmo.master" AutoEventWireup="true" 
	CodeBehind="SeriesTransition.aspx.cs" Inherits="C1BarChart_SeriesTransition" %>
<%@ Register Assembly="C1.Web.Wijmo.Controls.3" namespace="C1.Web.Wijmo.Controls.C1Chart" tagPrefix="wijmo" %>

<asp:Content ID="Content1" ContentPlaceHolderID="Head" Runat="Server">
	<script type="text/javascript">
		function hintContent() {
			return this.data.label + '\n' + this.y + '';
		}

		function changeProperties() {
			var seriesTransition = {};
			enabled = $("#chkEnabled").is(":checked"),
				duration = $("#inpDuration").val(),
				easing = $("#selEasing").val();
			seriesTransition.enabled = enabled;
			if (duration && duration.length) {
				seriesTransition.duration = parseFloat(duration);
			}
			seriesTransition.easing = easing;
			$("#<%= C1BarChart1.ClientID %>").c1barchart("option", "seriesTransition", seriesTransition);
		}

		function reload() {
			$("#<%= C1BarChart1.ClientID %>").c1barchart("option", "seriesList", [createRandomSeriesList("2010")]);
		}

		function createRandomSeriesList(label) {
			var data = [],
				randomDataValuesCount = 12,
				labels = ["一月", "二月", "三月", "四月", "五月", "六月",
					"七月", "八月", "九月", "十月", "十一月", "十二月"],
				idx;
			for (idx = 0; idx < randomDataValuesCount; idx++) {
				data.push(createRandomValue());
			}
			return {
				label: label,
				legendEntry: false,
				data: { x: labels, y: data }
			};
		}

		function createRandomValue() {
			return Math.round(Math.random() * 100);
		}
	</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
	<input type="button" value="重载" onclick="reload()" />
	<wijmo:C1BarChart runat = "server" ID="C1BarChart1" ClusterRadius = "5" Height="475" Width = "756">
		<Hint>
			<Content Function="hintContent" />
		</Hint>
		<SeriesList>
			<wijmo:BarChartSeries Label="2010" LegendEntry="true">
				<Data>
					<X>
						<Values>
							<wijmo:ChartXData StringValue="一月" />
							<wijmo:ChartXData StringValue="二月" />
							<wijmo:ChartXData StringValue="三月" />
							<wijmo:ChartXData StringValue="四月" />
							<wijmo:ChartXData StringValue="五月" />
							<wijmo:ChartXData StringValue="六月" />
							<wijmo:ChartXData StringValue="七月" />
							<wijmo:ChartXData StringValue="八月" />
							<wijmo:ChartXData StringValue="九月" />
							<wijmo:ChartXData StringValue="十月" />
							<wijmo:ChartXData StringValue="十一月" />
							<wijmo:ChartXData StringValue="十二月" />
						</Values>
					</X>
					<Y>
						<Values>
							<wijmo:ChartYData DoubleValue="81" />
							<wijmo:ChartYData DoubleValue="95" />
							<wijmo:ChartYData DoubleValue="21" />
							<wijmo:ChartYData DoubleValue="88" />
							<wijmo:ChartYData DoubleValue="12" />
							<wijmo:ChartYData DoubleValue="23" />
							<wijmo:ChartYData DoubleValue="62" />
							<wijmo:ChartYData DoubleValue="79" />
							<wijmo:ChartYData DoubleValue="90" />
							<wijmo:ChartYData DoubleValue="62" />
							<wijmo:ChartYData DoubleValue="69" />
							<wijmo:ChartYData DoubleValue="46" />
						</Values>
					</Y>
				</Data>
			</wijmo:BarChartSeries>
		</SeriesList>
		<Axis>
			<Y Text = "点击次数" AutoMax = "false" AutoMin = "false" Max = "100" Min = "0" Compass="West">
			</Y>
			<X Text = "月份">
			</X>
		</Axis>
	</wijmo:C1BarChart>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="Description" Runat="Server">
	<p>在重新下载数据时，<strong>C1BarChart </strong>会呈现列值变换的动画效果。</p><br/>
	<p>
		<strong>SeriesTransition </strong>属性用来控制重新下载数据的动画效果。 
		它会从上一个位置变换到另一个位置，而不是像默认的动画一样从原始位置变换到新位置。
	</p>
	<ul>
		<li>SeriesTransition.Enabled 选择有无列值变换动画</li>
		<li>SeriesTransition.Duration</li>
		<li>SeriesTransition.Easing</li>
	</ul>
	<p> 缓和属性可以被设置为下列值之一:</p>
	<ul>
		<li>easeInCubic(">")</li>
		<li>easeOutCubic("<")</li>
		<li>easeInOutCubic("<>")</li>
		<li>easeInBack("backIn")</li>
		<li>easeOutBack("backOut")</li>
		<li>easeOutElastic("elastic")</li>
		<li>easeOutBounce("bounce")</li>
	</ul>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="ControlOptions" Runat="Server">
	<div>
		<label for="chkEnabled">
			列值变换设置：启用
		</label>
		<input id="chkEnabled" type="checkbox" checked="checked" />
		<label for="inpDuration">
			时间
		</label>
		<input id="inpDuration" type="text" value="1000" />
		<label for="selEasing">
			缓和
		</label>
		<select id="selEasing">
			<option value=">">></option>
			<option value="<"><</option>
			<option value="<>"><></option>
			<option value="backIn">backIn</option>
			<option value="backOut">backOut</option>
			<option value="bounce">bounce</option>
			<option value="elastic">elastic</option>
		</select>
		<input type="button" value="应用" onclick="changeProperties()" />
	</div>
</asp:Content>

